import React, { Fragment, useCallback, useEffect, useState } from "react";
import { Tabs, Toast } from "antd-mobile";

import styles from "./todos.module.scss";
import { AddPanel } from "components/AddPanel";
import { EmptyWrapper } from "components/EmptyWrapper";
import { useTodos } from "hooks/todo/useTodos";
import { ITodoType } from "types/todo";
import { TodoItem } from "components/TodoItem";

function Todos() {
  const [activeIndex, setActiveIndex] = useState(0);
  const {
    todos,
    todoMsg,
    addTodoToList,
    deleteOneTodo,
    updateTodoContent,
    toggleTodoFinish,
    toggleTodoImportant,
  } = useTodos();
  useEffect(() => {
    if (todoMsg) {
      Toast.show(todoMsg);
    }
  }, [todoMsg]);

  const todoItems = [
    {
      type: ITodoType.Task,
      key: "task",
      title: "任务",
      emptyDesc: "暂无数据, 请尝试使用下方的添加任务。",
    },
    {
      type: ITodoType.Important,
      key: "important",
      title: "重要",
      emptyDesc: "暂无数据, 请尝试标记重要。",
    },
    {
      type: ITodoType.Finished,
      key: "finished",
      title: "完成",
      emptyDesc: "暂无数据, 请尝试标记完成。",
    },
  ];

  const getTodosByActiveIndex = useCallback(
    (index: number) => {
      console.log(todos);
      if (index === ITodoType.Task) {
        return todos.filter((todo) => todo.finishedSign !== true);
      }
      if (index === ITodoType.Important) {
        return todos.filter((todo) => todo.importantSign === true);
      }
      if (index === ITodoType.Finished) {
        return todos.filter((todo) => todo.finishedSign === true);
      }
      return [];
    },
    [todos]
  );

  return (
    <Fragment>
      <div className={styles.todos}>
        <div className={styles.tabs}>
          <Tabs
            activeKey={todoItems[activeIndex].key}
            onChange={(key) => {
              const index = todoItems.findIndex((item) => item.key === key);
              console.log("onchange: ", index);
              setActiveIndex(index);
            }}
          >
            {todoItems.map((item) => (
              <Tabs.Tab title={item.title} key={item.key} />
            ))}
          </Tabs>
        </div>
        <main className={styles.main}>
          {getTodosByActiveIndex(activeIndex).length === 0 ? (
            <EmptyWrapper desc={todoItems[activeIndex].emptyDesc} />
          ) : (
            <div className={styles.list}>
              {getTodosByActiveIndex(activeIndex).map((todo) => (
                <TodoItem
                  key={todo.id}
                  todo={todo}
                  deleteOneTodo={deleteOneTodo}
                  updateTodoContent={updateTodoContent}
                  toggleTodoFinish={toggleTodoFinish}
                  toggleTodoImportant={toggleTodoImportant}
                />
              ))}
            </div>
          )}
          <div className={styles.add}>
            {activeIndex === 0 ? (
              <AddPanel addTodoToList={addTodoToList} />
            ) : (
              <></>
            )}
          </div>
        </main>
      </div>
    </Fragment>
  );
}

export default Todos;
